body {
				margin: 0;
				padding: 0;
			}

			p,
			ul,
			textarea {
				padding: 0;
				margin: 0;
			}

			ul {
				list-style: none;
			}

			.todolist header {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 50px;
				box-shadow: 1px 1px 5px #eee;
			}

			.todolist header input {
				width: 50%;
				height: 70%;
				border-radius: 20px;
				font-size: 23px;
				text-indent: 16px;
				border: none;
				box-shadow: 1px 1px 3px #222;
				outline: none;
			}

			.todolist header button {
				margin-left: 30px;
				width: 70px;
				height: 37px;
				font-size: 20px;
			}

			.todolist main {
				/* margin-top: 17px; */
			}

			.todolist_list {
				width: 100%;
				/* height: 100%; */
			}

			.todolist_show {
				display: flex;
				justify-content: center;
				width: 100%;
			}

			.todolist_show textarea {
				margin: 17px 0;
				padding: 100px;
				padding-top: 0;
				width: 70%;
				height: 200px;
				background: rgba(255, 255, 255, .5);
				border-radius: 10px;
				font-size: 50px;
				letter-spacing: 1px;
				box-sizing: border-box;
				box-shadow: 1px 1px 5px #eee;
				border: none;
				outline: none;
				resize: none;
			}

			.todolist_show textarea::-webkit-scrollbar {
				width: 0;
			}

			.todolist_btns {
				width: 100%;
				height: 100px;
				display: flex;
				align-items: center;
				box-shadow: 1px 1px 5px #eee;
			}

			.todolist_btns button {
				margin-left: 20px;
				width: 120px;
				height: 60px;
				background: rgba(255, 255, 255, .5);
				border: 1px solid rgba(0, 0, 0, .1);
				border-radius: 10px;
				font-size: 30px;
				letter-spacing: 2px;
				box-shadow: 1px 1px 2px #555;
			}
			.todolist_btns button:hover {
				box-shadow: inset 1px 1px 3px #eee;
			}
			.todolist_list section{
				width: 100%;
			}
			.todolist_list ul {
				/* margin-top: 17px; */
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				width: 100%;
			}

			.todolist_list ul li {
				position: relative;
				margin-top: 17px;
				display: flex;
				flex-wrap: wrap;
				width: 230px;
				border-radius: 20px;
				box-shadow: 1px 2px 3px #000;
				color: #fff;
				overflow: hidden;
			}

			.todolist_list ul li::after {
				content: '';
				position: absolute;
				top: 4%;
				left: 50%;
				transform: translateX(-50%);
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				box-shadow: 1px 1px 3px #000;
			}

			.todolist_list ul li:hover {
				box-shadow: inset -1px -1px 5px rgba(0, 0, 0, .3);
			}

			.todolist_list ul li p {
				width: 100%;
				word-wrap: break-word;
				word-break: break-all;
				padding: 25px;
				letter-spacing: 2px;
			}

			.todolist_list ul li input {
				display: none;
			}

			.todolist_empty {
				opacity: .5;
				letter-spacing: 1rem;
				font-size: 100px;
			}

			.color_show {
				height: 30px;
				background: yellow;
				border-radius: 3px;
				font-weight: 700;
				font-size: 25px;
				letter-spacing: .2rem;
				color: orangered;
			}

			.check_list {
				text-decoration: line-through;
				filter: grayscale(100%);
			}
			@media screen and (max-width: 750px) {
				.todolist header input {
					width: 60%;
					font-size: 20px;
				}
				.todolist_show textarea{
					padding: 10px;
					width: 95%;
					height: 80px;
					font-size: 21px;
				}
				.todolist_btns {
					height: 75px;
				}
				.todolist_btns {
					justify-content: space-evenly;
				}
			   .todolist_btns button {
				   margin: 0;
				   width: 90px;
				   height: 45px;
				   font-size: 16px;
			   }
			   .todolist_list ul li {
			   	width: 95%;
			   }
			}

			@keyframes backgroundShade {

				0%,
				100% {
					opacity: 1;
				}

				50% {
					opacity: 0;
				}
			}